import React from 'react'
import { Upload,Button,Icon } from 'antd';

export default class AliyunOSSUpload extends React.Component {
    state = {
      OSSData: {
        host: '/upload/',
        accessId: 'LTAI5t9oKo1eut4WsdmyHfSZ',
        policy: 'eyJleHBpcmF0aW9uIjoiMjIyMi0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==',
        signature: 's3st3NJwJuuyPPA1q4XQk8CX1O4=',
      },
    };
  
    // async componentDidMount() {
    //   await this.init();
    // }
  
    // init = async () => {
    //   try {
    //     const OSSData = await this.mockGetOSSData();
  
    //     this.setState({
    //       OSSData,
    //     });
    //   } catch (error) {
    //     message.error(error);
    //   }
    // };
  
    // Mock get OSS api
    // https://help.aliyun.com/document_detail/31988.html
    // mockGetOSSData = () => {
    //   return {
    //     // dir: 'i-health/',
    //     // expire: '1577811661',
    //     host: '/upload/',
    //     accessId: 'LTAI5t9oKo1eut4WsdmyHfSZ',
    //     policy: 'eyJleHBpcmF0aW9uIjoiMjIyMi0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==',
    //     signature: 's3st3NJwJuuyPPA1q4XQk8CX1O4=',
    //   };
    // };
  
    onChange = ({ file, fileList }) => {
      const { onChange } = this.props;
      console.log('Aliyun OSS:', fileList);
      console.log(file,'111')
      if (onChange) {
        onChange([...fileList]);
      }
    };
  
    onRemove = file => {
      const { value, onChange } = this.props;
  
      const files = value.filter(v => v.url !== file.url);
  
      if (onChange) {
        onChange(files);
      }
    };
  
    // transformFile = file => {
    //   const { OSSData } = this.state;
  
    //   const suffix = file.name.slice(file.name.lastIndexOf('.'));
    //   const filename = Date.now() + suffix;
    //   console.log(file,'file')
    //   file.url = 'i-health/' + filename;
    //   console.log(filename,'filename')
    //   // file.name=filename;
    //   return file;
    // };
  
    getExtraData = file => {
      const { OSSData } = this.state;
  
      return {
        key: file.name,
        OSSAccessKeyId: OSSData.accessId,
        policy: OSSData.policy,
        Signature: OSSData.signature,
      };
    };
  
    beforeUpload =  (file) => {
      const suffix = file.name.slice(file.name.lastIndexOf('.'));
      Object.defineProperty(file,'name',{
        writable:true
      })
      file.name=Math.random().toString(16).slice(2)+suffix;
      file.url='https://i-health.oss-cn-hangzhou.aliyuncs.com/'+file.name;
      return new Promise((resolve)=>resolve(file))
    };
  
    render() {
      const { value } = this.props;
      console.log(value,'value')
      const props = {
        name: 'file',
        fileList: value,
        action: this.state.OSSData.host,
        onChange: this.onChange,
        onRemove: this.onRemove,
        // transformFile: this.transformFile,
        data: this.getExtraData,
        beforeUpload: this.beforeUpload,
      };
      return (
        <Upload {...props}>
          <Button>
            <Icon type="upload" /> 点击上传
          </Button>
        </Upload>
      );
    }
  }
  